<template>
	<ul>
		<!-- 新闻样例 -->
		<li class="news" v-for="(item, index) in new_list" :key="index">
			<div class="left">
				<div class="title">{{ item.title }}</div>
				<div class="info">
					<span>{{ item.source }}</span>
					<span>{{ item.time }}</span>
				</div>
			</div>
			<div class="right">
				<img :src="item.img" alt="">
			</div>
		</li>
	</ul>
</template>

<script setup>
	import { ref, onBeforeMount } from 'vue'
	import axios from 'axios'
	const new_list = ref([])  // 新闻的数组
	// 创建一个axios请求实例
	// http://hmajax.itheima.net/api/news
	// request是一个方法
	const request = axios.create({
		baseURL: 'http://hmajax.itheima.net/api', // 全局基本请求路径
		timeout: 2000 // 全局的超时时间
	})
	// console.log(typeof request) // function
	// 发起请求
	// request.get()
	// request.post()
	onBeforeMount(() => {
		request({
			url: '/news', // 会自动拼接baseURL
			method: 'get'
		}).then(result => {
			console.log('请求成功')
			// console.log(result) // 是经过axios封装的一个响应对象
			console.log(result.data)
			new_list.value = result.data.data // 数组数据
		}).catch(error => {
			console.log('请求失败')
			console.log(error) // 是经过axios封装的一个响应对象
		})
	})
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.news {
		display: flex;
		height: 120px;
		width: 600px;
		margin: 0 auto;
		padding: 20px 0;
		cursor: pointer;
	}

	.news .left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 10px;
	}

	.news .left .title {
		font-size: 20px;
	}

	.news .left .info {
		color: #999999;
	}

	.news .left .info span {
		margin-right: 20px;
	}

	.news .right {
		width: 160px;
		height: 120px;
	}

	.news .right img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>